<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格</title>
    <style>
      table {
        /* collapse: 合并 separate: 分隔 */
        border-collapse: collapse;
        font-size: 0.8rem;
        margin: 0 auto;
      }

      td,
      th {
        border: 1px solid rgb(190, 190, 190);
        padding: 10px 20px;
      }

      tr:hover {
        background-color: #f3f1f5;
      }
      td:hover {
        background-color: #f0d9ff;
      }
    </style>
  </head>

  <body>
    <div>
      <!-- 表格 -->
      <table>
        <caption>
          <h1>人员信息表</h1>
        </caption>
        <!-- 通过包裹的方式批量设置样式-->
        <colgroup>
          <col />
          <col />
          <col style="background-color: yellow" />
        </colgroup>
        <!-- 定义行 -->
        <tr>
          <!-- 标题 -->
          <th>/</th>
          <th id="name">Name</th>
          <th id="age">Age</th>
          <th id="address">Address</th>
        </tr>
        <tr>
          <th>1</th>
          <!-- 普通单元格 -->
          <td>Daived</td>
          <td>100</td>
          <td>BeiJing ChaoYang</td>
        </tr>
        <tr>
          <th>SUM</th>
          <!-- colspan: 占用单元格数 -->
          <!-- colspan: col 占用一列 -->
          <td colspan="3" style="text-align: center">1</td>
        </tr>
      </table>
    </div>
  </body>
</html>
